<template>
  <div>
    <van-nav-bar title="黑马头条-登录" :fixed="true" placeholder />
    <van-form @submit="onSubmit">
      <!-- van-field 输入框
            name里值: 是后台规定的传参用的参数名
            label前面提示文字
            required: 前面有红色的小星星
         -->
      <van-field
        v-model="form.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        required
        :rules="[
          { required: true, message: '请填写手机号', pattern: /^1[3-9]\d{9}$/ },
        ]"
      />
      <van-field
        v-model="form.code"
        name="code"
        type="password"
        label="验证码"
        placeholder="验证码"
        required
        :rules="[
          { required: true, message: '请填写验证码', pattern: /^\d{6}$/ },
        ]"
      />
      <div style="margin: 16px">
        <!--
             native-type 原生 button 标签的 type 属性
             此按钮就有提交功能
           -->
        <van-button
        round
        block
        type="info"
        native-type="submit"
        :disabled="isLogin"
        loading-text="程序媛拼命加载ing..."
        :loading="isLogin"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 实现任何需求:
// 1. 铺设页面(html+css)
// 2. 铺设数据(修改数据)
// 3. 交互功能
// 4. 调用后台接口

// 目标: 登录页面-路由
// 1. views/Login/index.vue - 给框
// 2. 配置到router/index.js里
// 3. App.vue - router-view挂载点

// 目标: 头部导航
// 1. 明确需求, 复制组件过来, 剔除无用的
// 2. 再修改, 改标题内容, 改背景颜色, 字体颜色
// 3. 查文档 -> 定制样式
// 4. babel.config.js里配置
// 5. vue.config.js里配置cover.less文件的绝对地址

// 目标: 登录表单-铺设-校验
// 1. 找到表单van-form整体复制过来
// 2. 查看属性意思, 相应修改
// 3. 寻找红色前星星, required属性
// 4. v-model绑定form对象属性和输入框值
// 5. field-里rules设置校验规则

// 目标: 登录功能-拿到数据
// vant组件不同于element-ui, vant组件的van-form遇到提交时, 会自己检验每个表单里的规则, 不通过, 就不执行submit事件的方法
// 可以用this.form / values 都是参数名和值

// 目标: 登录接口调用
// 1. api里, 看接口, 编写接口方法
// 2. 在Login/index.vue中, 引入, 在submit函数中使用, 传入收集到的form对象里参数名和值
// 3. 之后, 拿到token.js工具, 直接把token存入本地(不用存vuex里)
// 4. Notify通知, 给用户反馈, vant组件(有的可以用函数形式调用, 有的也可以用组件形式来调用, 具体要看文档)

// 目标: (优化)防止用户频繁点击按钮
// 1. 按钮身上, 禁用属性, 网络请求开始, 开启禁用, 请求成功/失败, 关闭禁用
// 2. 同时, 加载状态提示用户 loading, loading-text

import { loginAPI } from '@/api'
import { setToken } from '@/utils/token'
import { Notify } from 'vant'
export default {
  data () {
    return {
      form: {
        mobile: '18246909048',
        code: '246810'
      },
      isLogin: false // 按钮禁用状态
    }
  },
  methods: {
    // 登录-点击事件
    async onSubmit (values) {
      this.isLogin = true
      // values收集每个表单name属性名和表单对应的值形成一个大对象
      try {
        const res = await loginAPI({
        //   mobile: this.form.mobile,
        //   code: this.form.code
          ...this.form
        })

        setToken(res.data.data.token)
        localStorage.setItem('refresh_token', res.data.data.refresh_token)
        Notify({ type: 'success', message: '恭喜你! 登录成功!' })
        this.isLogin = false
        this.$router.push({
          path: this.$route.query.pa || '/layout' // 有未遂的地址就回去, 如果没有就去/layout
        })
      } catch (err) {
        console.error(err)
        Notify({ type: 'danger', message: '登录失败!!!' })
        this.isLogin = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
// @nav-bar-background-color: blue;
</style>
